<template>
  <div id="login-container">
    <!-- 导航 -->
    <MMNavBar back="/my"></MMNavBar>
    <div class="main-container">
      <h2>您好,请登录</h2>
      <van-form ref="form" validate-first @submit="onSubmit" @failed="onFail">
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="mobile"
          name="mobile"
          placeholder="请输入手机号"
          :rules="[
            {
              pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
              message: '手机号格式不对'
            }
          ]"
        >
          <!-- 具名插槽,设置左侧图标 -->
          <template #left-icon>
            <i class="iconfont iconbianzu1"></i>
          </template>
        </van-field>
        <van-field
          v-model="code"
          name="code"
          placeholder="验证码"
          :rules="[
            {
              required: true,
              message: '验证码不能为空'
            }
          ]"
        >
          <template #left-icon>
            <i class="iconfont iconyanzhengma"></i>
          </template>
          <!-- 具名插槽 右侧的按钮 -->
          <template #button>
            <span @click="getLoginCode" class="code-btn van-hairline--left">{{
              btnmes
            }}</span>
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import MMNavBar from '@/components/MMNavBar'
// 导入方法,发请求需要调用这个方法
import { getCode, login } from '@/api/my'
// 导入设置token的函数
import { setToken } from '@/utils/token.js'
// 导入辅助函数
import { mapMutations } from 'vuex'
export default {
  // 给引入的封装的插件注册
  components: {
    MMNavBar
  },
  methods: {
    ...mapMutations(['CHANGEUSERINFO', 'CHANGEISLOGIN']),
    // 验证通过,发送登录请求
    onSubmit () {
      console.log('submit')
      const { mobile, code } = this
      login({ mobile, code }).then(res => {
        console.log('res:', res)
        if (res.data.code === 200) {
          // 保存token
          // window.localStorage.setItem('token', res.data.data.jwt)
          setToken(res.data.data.jwt)
          // 保存用户信息 vuex
          // this.$store.commit('changeUserInfo', res.data.data.user)
          this.CHANGEUSERINFO(res.data.data.user)
          this.CHANGEISLOGIN(true)
          // 提示用户
          this.$toast.success('欢迎')
          // 跳转
          const { redirect } = this.$route.query
          if (redirect) {
            return this.$router.replace(redirect)
          }
          return this.$router.replace('/my')
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    onFail () {
      console.log('fail')
    },
    // 获取验证码
    getLoginCode () {
      // 只有在手机验证通过之后,才可以发送请求验证码的请求
      this.$refs.form
        .validate('mobile')
        .then(res => {
          console.log('then', res)
          if (this.delay !== 0) {
            return
          }
          // 只能在这里给delay定义成60秒,因为如果直接默认60秒,
          // 第一句代码,他就返回了,永远进入不到下一行执行
          this.delay = 60
          // es6的新语法,跟它下面的一句代码的意思是一致的
          const { mobile } = this
          // const mobile = this.mobile
          // 这是一个关于加载的弹出层
          this.$toast.loading()
          // 通过获取输入的手机号,发送请求,获取验证码,只需要一个手机号就行
          getCode({ mobile }).then(res => {
            // 成功后提示的弹出层
            this.$toast.success(res.data.data)
          })
          // 修改后面显示框内的文字,跟计时器配合,不让用户频繁点击发送验证码按钮
          this.btnmes = `${this.delay}s后继续`
          // 这里开启一个定时器
          const interId = setInterval(() => {
            this.delay--
            if (this.delay === 0) {
              clearInterval(interId)
              this.btnmes = '点击获取验证码'
              return
            }
            this.btnmes = `${this.delay}s后继续`
          }, 100)
        })
        .catch(err => {
          console.log('catch', err)
        })
    }
  },
  data () {
    return {
      // 手机号
      mobile: '18888888888',
      // 验证码
      code: '',
      // 倒计时时间
      delay: 0,
      // 点击按钮的文本
      btnmes: '点击获取验证码'
    }
  }
}
</script>

<style lang="less">
#login-container {
  background-color: @white-color;
  .van-field__body {
    padding-left: 20px;
  }
  .main-container {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 50px;
    h2 {
      font-size: 18px;
      margin-top: 0;
      margin-bottom: 65px;
    }
    .code-btn {
      font-size: 16px;
      color: @assist-color;
      display: block;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: @white-color;
    }
  }
}
</style>
